<!-- src/components/NutWrapper.vue -->
<template>
  <nut-config-provider :theme-vars="themeVars" :theme="themeMode">
    <slot />
  </nut-config-provider>
</template>

<script>
import { useThemeStore } from "@/stores/themeStore.js";
import { eventCenter, getCurrentInstance } from "@tarojs/taro";

export default {
  data() {
    return {
      themeVars: null,
      themeMode: "",
    };
  },
  mounted() {
    // 初始化主题
    const themeStore = useThemeStore();
    this.updateThemeVars(themeStore);

    // 监听页面显示
    eventCenter.on(getCurrentInstance().router.onShow, () => {
      const themeStore = useThemeStore();
      this.updateThemeVars(themeStore);
    });
  },
  methods: {
    updateThemeVars(themeStore) {
      console.log(themeStore.themeMode);
      if (themeStore.themeMode === "dark") {
        this.themeMode = "dark";
      } else {
        this.themeMode = "";
      }
      // 计算字体大小，基于基础字号动态计算
      const baseFontSize = parseInt(themeStore.fontSize);

      const fontSizes = {
        fontSize0: `${baseFontSize - 4}px`, // 基础字号-4
        fontSize1: `${baseFontSize - 2}px`, // 基础字号-2
        fontSize2: `${baseFontSize}px`, // 基础字号
        fontSize3: `${baseFontSize + 2}px`, // 基础字号+2
        fontSize4: `${baseFontSize + 4}px`, // 基础字号+4
      };

      this.themeVars = {
        ...themeStore.currentTheme,
        // NutUI 组件主题变量
        primaryColor: themeStore.currentTheme.primaryColor,
        primaryColorEnd: themeStore.currentTheme.primaryColorEnd,
        backgroundColor: themeStore.currentTheme["--background-color"],
        cellBackgroundColor: themeStore.currentTheme["--card-background"],
        cellColor: themeStore.currentTheme["--text-color"],
        textColor: themeStore.currentTheme["--text-color"],
        cellDescColor: themeStore.currentTheme["--text-color-secondary"],
        cellLineColor: themeStore.currentTheme["--border-color"],

        // NutUI 字体大小变量
        "font-size-0": fontSizes.fontSize0,
        "font-size-1": fontSizes.fontSize1,
        "font-size-2": fontSizes.fontSize2,
        "font-size-3": fontSizes.fontSize3,
        "font-size-4": fontSizes.fontSize4,
      };
    },
  },
};
// 你可以自定义主题颜色、字体、圆角等
</script>
<style lang="scss"></style>
